XAML AppBar control sample

This sample demonstrates how to use an app bar to present navigation, commands, and tools to users.

Note  This sample was created using one of the universal app templates available in Visual Studio. It shows how its solution is structured so it can run on both Windows 8.1 and Windows Phone 8.1. For more info about how to build apps that target Windows and Windows Phone with Visual Studio, see Build apps that target Windows and Windows Phone 8.1 by using Visual Studio.

On Windows, the app bar is hidden by default and appears when users swipe a finger from the bottom edge of the screen. The app bar covers the content of the app and can be dismissed by the user with an edge swipe or by interacting with the app. (The Windows sample demonstrates both the AppBar control and the lightweight CommandBar control.)

On Windows Phone 8.1, the app bar is visible by default and has two states: "closed" and "opened". When in the closed state, an app bar can either be "minimal" or "compact". The app bar goes to an opened state when the user taps the ellipsis on the app bar. (The Windows Phone 8.1 sample demonstrates the lightweight CommandBar control.)

This sample shows how to add an app bar, customize the app bar, and control the app bar.

This sample is written in Extensible Application Markup Language (XAML). For the HTML version, see the HTML AppBar control sample.

To obtain an evaluation copy of Windows 8.1, go to Windows 8.1.

To obtain an evaluation copy of Microsoft Visual Studio 2013, go to Visual Studio 2013.

Note  For Windows 8.1 app samples, download the Windows 8.1 app samples pack. The samples in the Windows 8.1 app samples pack will build and run only on Visual Studio 2013.

Related topics

AppBar

Adding app bars

Guidelines and checklist for app bars

HTML AppBar control sample

QuickStart: Adding app bars

Roadmap for C# and Visual Basic

Operating system requirements

Build the sample

1. Start Visual Studio 2013 Update 2 and select File > Open > Project/Solution.
2. Go to the directory to which you unzipped the sample. Then go to the subdirectory named for the sample and double-click the Visual Studio 2013 Update 2 Solution (.sln) file.
3. Follow the steps for the version of the sample you want:

   • To build the Windows version of the sample:

     1. Select AppBarControl.Windows in Solution Explorer.
     2. Press Ctrl+Shift+B, or use Build > Build Solution, or use Build > Build AppBarControl.Windows.

   • To build the Windows Phone version of the sample:

     1. Select AppBarControl.WindowsPhone in Solution Explorer.
     2. Press Ctrl+Shift+B or use Build > Build Solution or use Build > Build AppBarControl.WindowsPhone.

Run the sample

The next steps depend on whether you just want to deploy the sample or you want to both deploy and run it.

Deploying the sample

• To deploy the built Windows version of the sample:

  1. Select AppBarControl.Windows in Solution Explorer.
  2. Use Build > Deploy Solution or Build > Deploy AppBarControl.Windows.

• To deploy the built Windows Phone version of the sample:

  1. Select AppBarControl.WindowsPhone in Solution Explorer.
  2. Use Build > Deploy Solution or Build > Deploy AppBarControl.WindowsPhone.

Deploying and running the sample

• To deploy and run the Windows version of the sample:

  1. Right-click AppBarControl.Windows in Solution Explorer and select Set as StartUp Project.
  2. To debug the sample and then run it, press F5 or use Debug > Start Debugging. To run the sample without debugging, press Ctrl+F5 or use Debug > Start Without Debugging.

• To deploy and run the Windows Phone version of the sample:

  1. Right-click AppBarControl.WindowsPhone in Solution Explorer and select Set as StartUp Project.
  2. To debug the sample and then run it, press F5 or use Debug > Start Debugging. To run the sample without debugging, press Ctrl+F5 or use Debug > Start Without Debugging.